import React, { ReactElement, useEffect, useState } from 'react'
import { Card, Checkbox, Stepper } from 'antd-mobile'
import { CartProductType, UpdateProductType } from '@/models/types'
import styles from './index.less'
import classnames from 'classnames'
interface Props {
    data: CartProductType[],
    updateProduct: (newState: UpdateProductType) => void;
}

export default function List({ updateProduct, data }: Props): ReactElement {
    console.log('data', data);

    return (
        /**
         * <Card>
         * 里面的数据竖着排列
         * 
         * 商品勾选
         * <Checkbox.CheckboxItem>
         */
        <Card
            full
            className={styles.main}
        >
            {data.map((product: CartProductType, index) => (
                <Node index={index} key={product.id} {...product} updateProduct={updateProduct}></Node>
            ))}
        </Card>
    )
}
/**
 * 
 * 商品勾选
 * <Checkbox.CheckboxItem>
 *  onChange
 *  checked
 * <Stepper>
 *  showNumber
 *  max={999}
 *  min={0}
 *  value
 *  onChange
 */
function Node({ id, title, img, price, count, checked, index, updateProduct }: CartProductType & {
    updateProduct: (newState: UpdateProductType) => void;
    index: number
}) {
    const changeHandle = (count: number) => id && updateProduct({ id, index, count })
    return (
        <Checkbox.CheckboxItem
            onChange={() => id && updateProduct({ id, index, checked: !checked })}
            checked={checked}
        >
            <div className={styles.node}>
                <div className={styles.imgBox}>
                    <img src={img} alt={title}></img>
                </div>
                <div className={styles.right}>
                    <div className={'twoRows'}>{title}</div>
                    <div className={styles.info}>
                        <p className={classnames('red')}>${price}</p>
                        <Stepper
                            className={styles.stepper}
                            showNumber
                            max={999}
                            min={0}
                            value={count}
                            onChange={changeHandle}
                        >
                        </Stepper>
                    </div>
                </div>
            </div>
        </Checkbox.CheckboxItem>)
}